<template>
	<view class="ep-picker-box">
		<!-- <button @tap.stop="show=false" style="z-index: 10;">萨克基督教</button> -->
		<!-- 蒙版区域 开始 -->
		<view class="ep-mask-box" @touchmove.stop.prevent="moveHandle" v-show="show" ></view>
		<!-- 蒙版区域 开始 -->
		<view v-show="show" class="ep-picker-content-wrap">
			<view class="ep-picker-content" style="display: flex;">
				<!-- 展示下拉项列表 开始 -->
				<view v-for="item in options" :key="item.value"
					class="option-item" @tap="optionslit(item.value)">
					<view :class="['btn',valueIndex==item.value?'active':'']" style="z-index: 10;">{{item.label}}</view>
				</view>
				<!-- 展示下拉项列表 结束 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["valueIndex"],
		data() {
			return {
				show: true,
				// disabled: false,
				options: [{
					value: "1",
					label: "今天",
					disabled: false,
				}, {
					value: "2",
					label: "三日内",
					disabled: false,
				}, {
					value: "3",
					label: "一周内",
					disabled: false,
				}, {
					value: "4",
					label: "全部",
					disabled: false,
					// disabled: true
				}],
				// value: '1'
			}
		},
		methods: {
			moveHandle() {},
			optionslit(e){
				const arr = this.options[Number(e)-1]
				this.$emit('choiceFun',arr,false)
				
			}
		}
	}
</script>


<style scoped lang="scss">
	.ep-picker-box {
		position: absolute;
		left: 0px;
		top: 103px;
		z-index: 99;
		width: 100%;
	}

	.ep-mask-box {
		position: fixed;
		z-index: 9;
		top: 157px;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.ep-picker-content {
		// width: 375px;
		// height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background: #FFFFFF;
		padding: 14px 0px;
		box-shadow: 0px 2px 8px 0px rgba(159, 175, 175, 0.81);

		.btn {
			// width: 76px;
			// height: 28px;
			border-radius: 2px;
			border: 1px solid rgba(136, 217, 209, 0.5);
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #88D9D1;
			line-height: 24px;
			text-align: center;
			padding: 0 12px;
			// margin:  0 10px;
		}
	}
	.active{
		background: rgba(255, 110, 145, 0.14) !important;
		border: 1px solid rgba(255, 110, 145, 0.5)!important;
		color: #FF6E91!important;
	}
	v-deep .uni-scroll-view {
		display: flex;
	}
</style>
